<template>
	<view class="page" style="padding-bottom: 20rpx;">
		<topVue title="订单额度详情"></topVue>
		<view class="item margin20">
			<text style="color: #4B5563; line-height: 1;">剩余总额度</text>
			<view class="total">{{ detail.listAmount/100 }}</view>
			<view class="inner margin20">
				<view class="flex align-center">
					<image src="../../static/person/case.png" style="width: 32rpx; height: 28rpx;"></image>
					<text style="color: #111827; line-height: 1; padding-left: 15rpx; font-weight: 600; font-size: 30rpx;">额度</text>
				</view>
				<view class="flex margin30">
					<view class="flex-column w33 align-center">
						<text style="color: #6B7280; line-height: 1;">分享补贴额度</text>
						<u-gap height="20"></u-gap>
						<text style="color: #111827; line-height: 1; font-weight: 600;">{{ detail.consumptionSubsidyAmount/100 }}</text>
					</view>
					<view class="flex-column w33 align-center">
						<text style="color: #6B7280; line-height: 1;">已用额度</text>
						<u-gap height="20"></u-gap>
						<text style="color: #111827; line-height: 1; font-weight: 600;">{{ detail.alreadyConsumptionSubsidy/100 }}</text>
					</view>
					<view class="flex-column w33 align-center"> 
						<text style="color: #6B7280; line-height: 1;">剩余额度</text>
						<u-gap height="20"></u-gap>
						<text style="color: #111827; line-height: 1; font-weight: 600;">{{ detail.remainingConsumptionSubsidy/100 }}</text>
					</view>
				</view>
				<view class="flex margin30" v-if="detail.orderType==='首购单'">
					<view class="flex-column w33 align-center">
						<text style="color: #6B7280; line-height: 1;">消费补贴额度</text>
						<u-gap height="20"></u-gap>
						<text style="color: #111827; line-height: 1; font-weight: 600;">{{ detail.shareCredits/100 }}</text>
					</view>
					<view class="flex-column w33 align-center">
						<text style="color: #6B7280; line-height: 1;">已用额度</text>
						<u-gap height="20"></u-gap>
						<text style="color: #111827; line-height: 1; font-weight: 600;">{{ detail.alreadyShareCredits/100 }}</text>
					</view>
					<view class="flex-column w33 align-center"> 
						<text style="color: #6B7280; line-height: 1;">剩余额度</text>
						<u-gap height="20"></u-gap>
						<text style="color: #111827; line-height: 1; font-weight: 600;">{{ detail.remainingShareCredits/100 }}</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="item margin20">
			<view class="flex-between align-center">
				<view class="key">订单编号</view>
				<view class="flex align-center">
					<view class="value">{{ detail.no }}</view>
					<image 
						src="../../static/person/copy.png" 
						style="width: 30rpx; height: 30rpx; margin-left: 20rpx;"
						@click="$tools.copy(detail.no)"
					></image>
				</view>
			</view>
			<view class="flex-between align-center margin30">
				<view class="key">下单时间</view>
				<view class="value">{{ detail.invitationTime |formatTime("YMDHMS") }}</view>
			</view>
			<view class="flex-between align-center margin30">
				<view class="key">订单状态</view>
				<view class="type" :class="{typeActive: detail.orderType==='首购单'}">{{ detail.orderType }}</view>
			</view>
			<view class="flex-between align-center margin30">
				<view class="key">支付金额</view>
				<view class="value" style="color: #1CC289; font-weight: 600;">{{ detail.listAmount/100 }}</view>
			</view>
			<view class="flex-between align-center margin30">
				<view class="key">订单详情</view>
				<image src="../../static/more.png" style="width: 38rpx; height: 38rpx;"></image>
			</view>
		</view>
		
		<view class="box margin20">
			<view class="tabVue flex" v-if="detail.orderType==='首购单'">
				<view class="tab" :class="{active: current===0}" @click="change(0)">分享补贴额度</view>
				<view class="tab" :class="{active: current===1}" @click="change(1)">消费补贴额度</view>
			</view>
			<view class="li" v-for="(item,index) in list" :key="index">
				<view class="flex padding-row30">
					<view class="iconVue relative">
						<image src="../../static/green_g.png" style="width: 48rpx; height: 48rpx;" class="absolute-auto"></image>
					</view>
					<view class="flex-1 flex-column flex-between" style="height: 88rpx; padding-left: 20rpx;">
						<view class="flex-between">
							<view class="label">{{ item.statusSubsidy }}</view>
							<view class="num">{{item.amountSubsidy/100}}</view>
						</view>
						<view class="flex-between">
							<view class="label">{{ item.createTime | formatTime("YMDHMS") }}</view>
							<view class="remain">剩余：{{ item.remaining/100 }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from "vuex"
	export default {
		data(){
			return {
				list: [],
				isEmpty: false,
				current: 0,
				orderId: "",
				detail: {},
				pageNum: 1,
				pageSize: 10,
				pages: 0,
			}
		},
		onLoad(option) {
			this.orderId = option.value
		},
		async mounted() {
			await this.getDetail()
			await this.getList()
		},
		computed: {
			...mapState({
				user: state => state.user,
			})
		},
		methods: {
			async getDetail(){
				const res = await this.$request("/app-api/pay/wallet-transaction/getSubsidiesParticulars", "GET", {
					orderId: this.orderId
				})
				if(res.code===0) {
					this.detail = res.data
					console.log("jjj", this.detail)
				}
			},
			
			async getList(){
				const res = await this.$request("/app-api/pay/wallet-transaction/getOrderSubsidy", "GET", {
					orderId: this.orderId,
					pageNo: this.pageNum,
					pageSize: this.pageSize,
					subsidiesType: this.current==0 ? "分享补贴" : "消费补贴"
				})
				if(res.code===0) {
					this.list = this.list.concat(res.data.list)
					this.pages = Math.ceil(res.data.total/this.pageSize)
					console.log("补贴记录", this.list)
				}
			},
			
			change(e){
				this.current = e
				this.list = []
				this.pageNum = 1
				this.getList()
			}
		}
	}
</script>

<style lang="less" scoped>
	.box {
		width: 690rpx;
		background: #fff;
		border-radius: 12rpx;
		box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178, 178, 178, 0.25), inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.25);
		.tabVue {
			width: 100%;
			height: 88rpx;
			.tab {
				width: 345rpx;
				height: 88rpx;
				text-align: center;
				line-height: 88rpx;
				color: #4B5563;
			}
			.active {
				color: #60A5FA;
				background: rgba(96, 165, 250, 0.05);
			}
		}
		.li {
			width: 100%;
			height: 148rpx;
			border-bottom: 1rpx solid #f5f5f5;
			padding: 30rpx 0;
			.iconVue {
				width: 88rpx;
				height: 88rpx;
				background: #EFF6FF;
				border-radius: 50%;
				margin-bottom: 20rpx;
			}
			.label {
				color: #000;
				font-weight: 600;
			}
			.num {
				color: #1CC289;
				font-weight: 600;
			}
			.colorActive {
				color: #FF3B30;
			}
		}
	}
	.item {
		width: 690rpx;
		background: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178, 178, 178, 0.25), inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.25);
		.total {
			font-size: 32rpx;
			font-weight: 600;
			color: #111827;
			padding-top: 20rpx;
			line-height: 1;
		}
		.inner {
			width: 100%;
			padding: 20rpx;
			background: #F9FAFB;
		}
		.key {
			color: #4B5563;
			line-height: 1;
		}
		.value {
			color: #000000;
			line-height: 1;
		}
		.type {
			width: 106rpx;
			height: 58rpx;
			background: rgba(96, 165, 250, 0.1);
			border-radius: 20rpx;
			line-height: 56rpx;
			text-align: center;
			color: #60A5FA;
		}
		.typeActive {
			background: rgba(28, 194, 137, 0.1);
			color: rgba(28, 194, 137, 1);
		}
	}
</style>